<route lang="json5" type="page">
{
  layout: 'tabbar',
  style: {
    navigationBarTitleText: '购物车',
  },
}
</route>

<template>
  <view>
    <wd-status-tip
      custom-class="!mt-20"
      v-if="shopcartItems.length === 0"
      image="content"
      tip="暂无数据"
    />
    <scroll-view scroll-y class="scroll" v-else>
      <view style="overflow: hidden; content: ''"></view>
      <wd-swipe-action
        v-for="item in shopcartItems"
        custom-class="rounded-2xl ml-3 mr-3 mt-2"
        :key="item.upcCode"
      >
        <view class="product-card">
          <!-- <wd-checkbox
            v-model="item.selected"
            @change="({ value }) => shopcartStore.toggleSelection(item.id, value)"
            class="self-center !flex items-center"
          ></wd-checkbox> -->
          <wd-img width="200rpx" height="200rpx" round radius="10" :src="item.mainPic" />
          <view class="product-desc">
            <view class="product-text">
              <text>{{ item.productName }}</text>
              <text>{{ item.productSpec }}</text>
              <text>{{ item.price + '元' }}</text>
            </view>
            <view class="product-number">
              <wd-input-number
                v-model="item.quantity"
                @change="({ value }) => shopcartStore.updateQuantity(item)"
              />
            </view>
          </view>
        </view>
        <template #right>
          <view class="action">
            <view class="button" @click="handleDelete(item, 1)">删除</view>
          </view>
        </template>
      </wd-swipe-action>
    </scroll-view>
    <view class="total" v-if="shopcartItems.length > 0">
      <view class="flex items-center">
        <view>
          <text class="block text-sm">
            合计：
            <text class="htm-theme-color font-bold text-lg">￥{{ shopcartTotal }}</text>
          </text>
          <!-- <text class="block text-xs">
            已选
            <text class="htm-theme-color font-bold">{{ itemCount }}</text>
            件
          </text> -->
        </view>
      </view>
      <view class="content">
        <wd-icon
          @click="handleDelete(shopcartItems[0], 0)"
          name="delete1"
          size="40rpx"
          custom-class="text-gray-500 mr-2"
        ></wd-icon>
        <htm-button @click="handleSettlement">下单</htm-button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useShopcartStore } from '@/store/shopcart'
import { useMessage } from 'wot-design-uni'

const message = useMessage()
const shopcartStore = useShopcartStore()

const shopcartItems = computed(() => shopcartStore.shopcartItems)
const shopcartTotal = computed(() => shopcartStore.shopcartTotal)

const handleDelete = (cart, type) => {
  message
    .confirm({
      msg: type === 1 ? '确定删除当前商品' : '确定删除全部商品',
    })
    .then(() => {
      if (type === 1) {
        shopcartStore.removeFromShopcart(cart)
      } else {
        shopcartStore.clearShopcart(cart.storeCode)
      }
    })
    .catch(() => {
      console.log('点击了取消按钮')
    })
}

const handleSettlement = () => {
  uni.navigateTo({
    url: '/pages/submit-order/submit-order',
  })
}
</script>

<style lang="scss" scoped>
@import '/src/style/index';
.scroll {
  width: 100vw;
  height: calc(100vh - 120rpx - 158rpx - var(--window-top) - var(--window-bottom));
  overflow: hidden;
  :deep(.uni-scroll-view-content) {
    height: auto;
  }
}
.cell {
  box-sizing: border-box;
  width: 100vw;
}
.total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 120rpx;
  padding: 0 30rpx;
  background: hsla(0, 0%, 100%, 0.95);
  .content {
    display: flex;
    align-items: center;
    text {
      // margin-right: 20rpx;
      font-size: 28rpx;
    }
  }
}
.product-card {
  display: flex;
  padding: 25rpx;
  background: #ffffff;

  .product-desc {
    position: relative;
    width: calc(100% - 200rpx);
    // width: 100%;
    margin: 10rpx;
    .product-number {
      position: absolute;
      right: 0;
      bottom: 0;
    }
    .product-text {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      margin-left: 5rpx;
      text:nth-child(1) {
        display: block;
        flex: 2;
        margin-top: 5rpx;
        font-size: 28rpx;
        font-weight: bold;
      }
      text:nth-child(2) {
        display: block;
        margin-top: 5rpx;
        font-size: 24rpx;
        color: red;
      }
      text:nth-child(3) {
        display: block;
        margin-top: 5rpx;
        font-size: 20rpx;
        color: #999;
      }
    }
  }
}
.action {
  height: 100%;
  .button {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 11px;
    color: white;
    background-color: var(--wot-color-theme);
  }
}
</style>
